import React, {Component} from 'react';
import './index.css'


class Item extends Component {
    state = {
        mouse: false
    }

    handleMouse = (flag) => {
        return () => {
            this.setState({
                mouse: flag
            })
        }
    }

    handleCheck = (id) => {
        return (e) => {
            this.props.changeTodo(id, e.target.checked)
        }
    }

    handleDelete = (id) => {
        if (window.confirm('确定删除嘛？')) {
            this.props.deleteTodo(id)
        }
    }

    render() {
        const {itemValue} = this.props
        return (
            <li style={{background: this.state.mouse ? '#ddd' : 'white'}} onMouseLeave={this.handleMouse(false)}
                onMouseEnter={this.handleMouse(true)}>
                <label>
                    <input type="checkbox" onChange={this.handleCheck(itemValue.id)} checked={itemValue.done}/>
                    <span>{itemValue.name}</span>
                </label>
                <button onClick={() => {
                    this.handleDelete(itemValue.id)
                }} className="btn btn-danger" style={{display: this.state.mouse ? 'block' : 'none'}}>删除
                </button>
            </li>
        );
    }
}

export default Item;